<template>
  <div id="container">
    <a-row style="height: 20%">
      <a-col :span="4" class="col1"
        ><div class="sa">
          <a-statistic title="First EP" :value="fisrtEp" /></div
      ></a-col>
      <a-col :span="4" class="col1"
        ><div class="sa"><a-statistic title="Version" :value="version" /></div
      ></a-col>
      <a-col :span="4" class="col1"
        ><div class="sa">
          <a-statistic title="Master Week" :value="masterUptime" /></div
      ></a-col>
      <a-col :span="4" class="col1"
        ><div class="sa">
          <a-statistic title="Databases" :value="databases" /></div
      ></a-col>
      <a-col :span="4" class="col1"
        ><div class="sa"><a-statistic title="Tables" :value="tables" /></div
      ></a-col>
      <a-col :span="4" class="col1"
        ><div class="sa">
          <a-statistic title="Connections" :value="connections" /></div
      ></a-col>
    </a-row>
    <a-row style="height: 40%">
      <a-col :span="10" class="col1"
        ><div class="chart" name="cpu"></div
      ></a-col>
      <a-col :span="14" class="col1">
        <a-row style="height: 50%">
          <a-col :span="8" class="col1"
            ><div class="chart" name="cpu1"></div
          ></a-col>
          <a-col :span="8" class="col1"
            ><div class="chart" name="mem"></div
          ></a-col>
          <a-col :span="8" class="col1"
            ><div class="chart" name="disk"></div
          ></a-col>
        </a-row>
        <a-row style="height: 50%">
          <a-col :span="24" class="col1">
            <a-row style="height: 50%">
              <a-col :span="12" class="col1"
                ><a-statistic
                  title="Disk Read"
                  :value="disk_read"
                  :value-style="{ color: 'red' }"
                  style="width: 100%"
                  ><template #prefix>
                    <arrow-up-outlined />
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="12" class="col1"
                ><a-statistic
                  title="Disk Write"
                  :value="disk_write"
                  :value-style="{ color: 'green' }"
                  style="width: 100%"
                  ><template #prefix>
                    <arrow-down-outlined />
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
            <a-row style="height: 50%">
              <a-col :span="12" class="col1"
                ><a-statistic
                  title="Net Read"
                  :value="net_read"
                  :value-style="{ color: 'red' }"
                  style="width: 100%"
                  ><template #prefix>
                    <arrow-up-outlined />
                  </template>
                </a-statistic>
              </a-col>
              <a-col :span="12" class="col1"
                ><a-statistic
                  title="Net Write"
                  :value="net_write"
                  :value-style="{ color: 'green' }"
                  style="width: 100%"
                  ><template #prefix>
                    <arrow-down-outlined />
                  </template>
                </a-statistic>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row style="height: 40%">
      <a-col :span="24" class="col1">
        <div class="chart" name="request"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { ArrowUpOutlined, ArrowDownOutlined } from "@ant-design/icons-vue";
import {
  getFirstEp,
  getVersion,
  getMasterUptime,
  getDatabases,
  getTables,
  getConnections,
  getCpus,
  getCpu1,
  getMemory,
  getDisk,
  getIO,
  getRequest,
} from "../../utils/tdengineApi";

const echartList = [];

const fisrtEp = ref("");
const version = ref("");
const masterUptime = ref("");
const databases = ref(0);
const tables = ref(0);
const connections = ref(0);
const disk_read = ref(0);
const disk_write = ref(0);
const net_read = ref(0);
const net_write = ref(0);
let timer = undefined;

onMounted(async () => {
  setTimeout(async () => {
    draw();
    await run();
    timer = setInterval(async () => {
      await run();
    }, 1000 * 30);
  }, 100);
});

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

const draw = () => {
  initChart();
  drawCpuChart();
  drawCpu1Chart();
  drawMemChart();
  drawDiskChart();
  drawRequestChart();
};

const run = async () => {
  await getfep();
  await getVer();
  await getMast();
  await getDb();
  await getTab();
  await getConn();
  await getIOData();
  await refreshCpu();
  await refreshCpu1();
  await refreshMem();
  await refreshDisk();
  await refreshRequest();
};

window.addEventListener("resize", () => {
  echartList.forEach((e) => {
    e.chart.resize();
  });
});

const getfep = async () => {
  fisrtEp.value = await getFirstEp();
};

const getVer = async () => {
  version.value = await getVersion();
};

const getMast = async () => {
  masterUptime.value = await getMasterUptime();
};

const getDb = async () => {
  databases.value = await getDatabases();
};

const getTab = async () => {
  tables.value = await getTables();
};

const getConn = async () => {
  connections.value = await getConnections();
};

const getIOData = async () => {
  let data = await getIO();
  disk_read.value = data.io_read_disk;
  disk_write.value = data.io_write_disk;
  net_read.value = data.net_in;
  net_write.value = data.net_out;
};

// 初始化图表
const initChart = () => {
  let list = document.getElementsByClassName("chart");
  echartList.splice(0, echartList.length);
  for (let index = 0; index < list.length; index++) {
    echartList.push({
      name: list[index].attributes.name.value,
      chart: echarts.init(list[index]),
    });
  }
};

const drawCpuChart = () => {
  const chart = echartList.filter((v) => v.name === "cpu")[0].chart;
  const option = {
    tooltip: {
      trigger: "axis",
      formatter: "{b}<br />{a0} {c0}%<br />{a1} {c1}%",
    },
    title: {
      left: "left",
      text: "CPU",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "10%"],
    },
    series: [
      {
        name: "tdengine",
        type: "line",
        symbol: "none",
        sampling: "lttb",
        itemStyle: {
          color: "rgb(255, 70, 131)",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 158, 68)",
            },
            {
              offset: 1,
              color: "rgb(255, 70, 131)",
            },
          ]),
        },
      },
      {
        name: "system",
        type: "line",
        symbol: "none",
        sampling: "lttb",
        itemStyle: {
          color: "rgb(33, 119, 184)",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(147, 181, 207)",
            },
            {
              offset: 1,
              color: "rgb(33, 119, 184)",
            },
          ]),
        },
      },
    ],
  };
  chart.setOption(option);
};

const refreshCpu = async () => {
  let data = await getCpus();
  let date = data.map((v) => {
    return String(v.ts).slice(0, 19);
  });
  let cpu_tdengine = data.map((v) => {
    return v.cpu_engine;
  });
  let cpu_system = data.map((v) => {
    return v.cpu_system;
  });

  const chart = echartList.filter((v) => v.name === "cpu")[0].chart;
  chart.setOption({
    xAxis: {
      data: date,
    },
    series: [
      {
        data: cpu_tdengine,
      },
      {
        data: cpu_system,
      },
    ],
  });
};

const drawCpu1Chart = () => {
  const chart = echartList.filter((v) => v.name === "cpu1")[0].chart;
  const option = {
    title: {
      left: "left",
      text: "CPU",
    },
    series: [
      {
        type: "gauge",
        center: ["50%", "85%"],
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 5,
        itemStyle: {
          color: "#ad9e5f",
        },
        progress: {
          show: true,
          width: 20,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: -20,
          color: "#999",
          fontSize: 20,
        },
        anchor: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-15%"],
          fontSize: 20,
          formatter: "{value} %",
          color: "inherit",
        },
      },
    ],
  };
  chart.setOption(option);
};

const refreshCpu1 = async () => {
  const chart = echartList.filter((v) => v.name === "cpu1")[0].chart;
  let data = await getCpu1();
  chart.setOption({
    series: [
      {
        data: [
          {
            value: data,
          },
        ],
      },
    ],
  });
};

const drawMemChart = () => {
  const chart = echartList.filter((v) => v.name === "mem")[0].chart;
  const option = {
    title: {
      left: "left",
      text: "Memory",
    },
    series: [
      {
        type: "gauge",
        center: ["50%", "85%"],
        startAngle: 180,
        endAngle: 0,
        min: 0,
        splitNumber: 8,
        itemStyle: {
          color: "#93b5cf",
        },
        progress: {
          show: true,
          width: 20,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: -20,
          color: "#999",
          fontSize: 20,
        },
        anchor: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-15%"],
          fontSize: 20,
          formatter: "{value} GB",
          color: "inherit",
        },
      },
    ],
  };
  chart.setOption(option);
};

const refreshMem = async () => {
  const chart = echartList.filter((v) => v.name === "mem")[0].chart;
  let data = await getMemory();
  chart.setOption({
    series: [
      {
        max: data.mem_total,
        data: [
          {
            value: data.mem_engine,
          },
        ],
      },
    ],
  });
};

const drawDiskChart = () => {
  const chart = echartList.filter((v) => v.name === "disk")[0].chart;
  const option = {
    title: {
      left: "left",
      text: "Disk",
    },
    series: [
      {
        type: "gauge",
        center: ["50%", "85%"],
        startAngle: 180,
        endAngle: 0,
        min: 0,
        splitNumber: 5,
        itemStyle: {
          color: "#e2c027",
        },
        progress: {
          show: true,
          width: 20,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: "#999",
          },
        },
        axisLabel: {
          distance: -20,
          color: "#999",
          fontSize: 20,
        },
        anchor: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: "60%",
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, "-15%"],
          fontSize: 20,
          formatter: "{value} GB",
          color: "inherit",
        },
      },
    ],
  };
  chart.setOption(option);
};

const refreshDisk = async () => {
  const chart = echartList.filter((v) => v.name === "disk")[0].chart;
  let data = await getDisk();
  chart.setOption({
    series: [
      {
        max: data.disk_total,
        data: [
          {
            value: data.disk_used,
          },
        ],
      },
    ],
  });
};

const drawRequestChart = () => {
  const chart = echartList.filter((v) => v.name === "request")[0].chart;
  const option = {
    tooltip: {
      trigger: "axis",
      formatter: "{b}<br />{a0} {c0} 次",
    },
    title: {
      left: "left",
      text: "Http Request",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "10%"],
    },
    series: [
      {
        name: "请求",
        type: "line",
        symbol: "none",
        sampling: "lttb",
        itemStyle: {
          color: "rgb(255, 70, 131)",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 158, 68)",
            },
            {
              offset: 1,
              color: "rgb(255, 70, 131)",
            },
          ]),
        },
      },
    ],
  };
  chart.setOption(option);
};

const refreshRequest = async () => {
  let data = await getRequest();
  let date = data.map((v) => {
    return String(v.ts).slice(0, 19);
  });
  let values = data.map((v) => {
    return v.total;
  });

  const chart = echartList.filter((v) => v.name === "request")[0].chart;
  chart.setOption({
    xAxis: {
      data: date,
    },
    series: [
      {
        data: values,
      },
    ],
  });
};
</script>

<style scoped>
#container {
  width: 100%;
  height: 100%;
  /* background-color: #f2e7e5; */
  background: linear-gradient(to top left, #c6e6e8, #baccd9, #f2e7e5);
}
.col1 {
  height: 100%;
  /* border: 1px #ccc solid; */
}
.sa {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>
